<template>
	<view class="detail">
		<image class="img1" src="https://file.roumeiji.com/img/15.png" mode="widthFix"></image>
<!-- <view style="word-wrap: break-word;">
	{{model.file}}
</view> -->
		<view  @click="chooseAvatar" class="photo">
			<image  class="img" :src="model.file"></image>
			<view class="wz">
				更新头像
			</view>
		</view>
		
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="昵称"
				prop="nickName">
				<u-input :border="border" placeholder="请输入昵称" v-model="model.nickName" type="text"></u-input>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="真实姓名"
				prop="realName">
				<u-input :border="border" placeholder="请输入真实姓名" v-model="model.realName" type="text"></u-input>
			</u-form-item>

			<u-form-item :border-bottom="false" :label-position="labelPosition" label="性别" prop="sex">
				<u-input disabled :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex"
					placeholder="请选择您的性别" ></u-input>
					
					<!-- @click="actionSheetShow = true" -->
			</u-form-item>



			<u-form-item :border-bottom="false" :label-position="labelPosition" label="手机号码" prop="phone"
				label-width="150">
				<u-input disabled :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
			</u-form-item>

			<u-form-item :border-bottom="false" label-width="120" :label-position="labelPosition" label="身份证号"
				prop="idcard">
				<u-input :border="border" placeholder="请输入身份证号" v-model="model.idcard" type="text"></u-input>
			</u-form-item>

			<u-form-item :border-bottom="false" :label-position="labelPosition" label="所在城市" prop="region" label-width="150">
				<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region"
					placeholder="请选择请选择您的省市区" @click="pickerShow = true"></u-input>
			</u-form-item>

		</u-form>
		<!-- <u-button class="sub" @click="submit">提交</u-button> -->
		<view class="sub" @click="submit">提交</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>



	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				avatarBase64: '',
				model: {
					file1:'',
					file:'http://tou-file.oss-cn-hangzhou.aliyuncs.com/icons/28.png',
					nickName: '',
					realName: '',
					sex: '',
					phone: '',
					idcard: '',
					region: '',
					city:'',
					province:'',
					area:''
					
				},
				
				rules: {
					// nickName: [{
					// 	required: true,
					// 	message: '请输入昵称',
					// 	trigger: 'blur',
					// }],
					// realName: [{
					// 	required: true,
					// 	message: '请输入真实姓名',
					// 	trigger: 'blur',
					// }],
					// sex: [{
					// 	required: true,
					// 	message: '请选择性别',
					// 	trigger: 'change'
					// }, ],

					// phone: [
					// 	{
					// 		required: true,
					// 		message: '请输入手机号',
					// 		trigger: ['change', 'blur'],
					// 	},
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					// 			return this.$u.test.mobile(value);
					// 		},
					// 		message: '手机号码不正确',
					// 		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					// 		trigger: ['change', 'blur'],
					// 	}
					// ],
					// idcard: [
					// 	// {
					// 	// 	required: true,
					// 	// 	message: '请输入身份证号',
					// 	// 	trigger: ['change', 'blur'],
					// 	// },
					// 	{
					// 		validator: (rule, value, callback) => {
					// 			// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
					// 			return this.$u.test.idCard(value);
					// 		},
					// 		message: '身份证号不正确',
					// 		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					// 		trigger: ['change', 'blur'],
					// 	}
					// ],
					// region: [{
					// 	required: true,
					// 	message: '请选择请选择您的省市区',
					// 	trigger: 'change',
					// }],
				},
				border: true,

				selectStatus: 'close',

				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					}
					// {
					// 	text: '保密'
					// }
				],
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,

				labelPosition: 'top',

				errorType: ['message'],
			};
		},
		onLoad() {
			
			let infos = uni.getStorageSync('info')
		
			console.log(infos,'^^^^^^^');
			
			this.model.nickName = this.vuex_nickname
			this.model.realName=infos?.fullname
			this.model.idcard=infos?.userprofile?.idcard
			
		this.model.city=infos?.userprofile?.city
		this.model.province=infos?.userprofile?.province
		this.model.area=infos?.userprofile?.area
		
			this.model.region=(this.model.province ||'')  +(this.model.city ||'') +  (this.model.area ||'')
			
			this.model.phone = this.vuex_phone
			this.model.file = this.vuex_headimg
			this.model.file1 = this.vuex_headimg
			this.model.sex = this.vuex_sex==1?'男':'女'
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		
		
		methods: {
			chooseAvatar() {
				
				let that = this;
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(res.tempFilePaths,4444,JSON.stringify(res.tempFilePaths));
						
						that.model.file = res.tempFilePaths[0]
						
						uni.uploadFile({
							url: that.vuex_config.baseUrl + '/api/util/fileupload',
							header: {
								'content-type': 'multipart/form-data',
								'Authorization':'Bearer '+that.vuex_token
							},
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'file': res.tempFilePaths[0]
							},
							success: (res) => {
								// that.model.file = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
								
								that.model.file1 =  'https://file.roumeiji.com' + JSON.parse(res.data)?.[0]?.url;
							}
						});
						
						
					}
				});
			
			},
		
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						
					
						
						
						let {nickName,realName,phone,idcard,file1,city,area,province}  =this.model
						if(idcard){
							if(!this.$u.test.idCard(idcard)){
								this.$u.toast('身份证号不正确');
								
								return
							}
							
						}
						
						
					
							this.$u.api
								.profilemodify({
							
									nickname: nickName,
									fullname:realName,
									gender:this.vuex_sex==1?'男':'女' ,//男1女2
									mobile: this.vuex_phone,
									idcard,
									province,
									city,
									area,
									headimg:file1
									
								})
								.then((res) => {
									
										if(res.code===0){
											this.$u.toast('保存成功');
											
											uni.setStorageSync('info', res.data);
											
											this.$u.vuex("vuex_nickname", nickName);
											this.$u.vuex("vuex_headimg", file1);
										}else{
											this.$u.toast(res.msg);
										}
										
								});
						
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.sex = this.actionSheetList[index].text;
			},


			// 选择地区回调
			regionConfirm(e) {
				
				this.model.region = e.province.label +  e.city.label + e.area.label;
				this.model.city  = e.city.label;
				this.model.area  = e.area.label;
				this.model.province  = e.province.label;
			},


		}
	};
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-form-item {
		padding-bottom: 0 !important;
	}

	.sub {
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #3C9226, #1F6F0E);
		border-radius: 41rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #F4F4F4;
		margin: 60rpx auto;
	}

	.detail {
		margin: 14rpx 21rpx 0;
		background: #FFFFFF;
		border-radius: 10rpx;
		min-height: 100vh;
		position: relative;
		padding: 59rpx 26rpx 30rpx;



		.img1 {
			position: absolute;
			right: 0;
			top: 85rpx;
		}

		.photo {
			position: relative;
			width: 169rpx;
			height: 169rpx;
			overflow: hidden;
			margin: 0 auto;
			border-radius: 50%;
			box-shadow: 0 0 2px 2px #efefef;
		}

		.img {
			display: block;
			width: 169rpx;
			height: 169rpx;
			border-radius: 50%;

		}

		.wz {
			position: absolute;
			text-align: center;
			bottom: 0;
			left: 0;
			width: 169rpx;
			height: 43rpx;
			line-height: 38rpx;
		
			background: #000000;
			opacity: 0.76;
font-size: 10px;
			color: #FFFFFF;
		}

	}
</style>
